<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="closeDailog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <span slot="title">添加品牌</span>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
    >
      <el-form-item
        label-width="80"
        label="品牌LOGO"
      >
       <div v-if="form.logo===''">
        <el-upload
          :file-list="file_list"
          :before-upload="beforelogoUpload"
          :on-change="changeFile"
          action="action"
          :http-request="uploadFile"
          ref="editEnc"
          :class="file_list.length === 0 ? 'styleA' :'styleB'"
          list-type="picture-card"
        >
          <i
            slot="default"
            class="el-icon-plus"
          ></i>
          <div
            slot="file"
            slot-scope="{file}"
          >
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        </div>
        <div v-else>
            <el-image
              style=" border: 1px dashed #99A9BF; width: 100px; height: 100px;"
              @click="handleRemovelogo(form.logo)"
              :src="form.logo"
            ></el-image>
        </div>
      </el-form-item>
      <el-form-item label="品牌名称">
        <el-input
          v-model="form.brandName"
          placeholder="请输入品牌名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label-width="80"
        label="品牌首字母"
      >
        <el-select
          v-model="form.letter"
          placeholder="请选择品牌首字母"
        >
          <el-option
            v-for="item in data"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div style="text-align: right ;">
          <el-button @click="closeDailog">取消</el-button>
          <el-button
            type="primary"
            @click="addBrand"
          >确定</el-button>
        </div>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
import { baseUrl } from "@/api/baseUrl";
import { addBrand, uploadImg  } from "@/api/api";
export default {
  name: "BrandaddDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    visible1: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.dialogVisible = val;
      },
    },
  },
  data() {
    return {
      dialogVisible: this.visible,
      form: {
        logo: "",
        brandName: "",
        letter: "",
      },
      baseUrl: baseUrl,
      data: [
        { value: "A", label: "A" },
        { value: "B", label: "B" },
        { value: "C", label: "C" },
        { value: "D", label: "D" },
        { value: "E", label: "E" },
        { value: "F", label: "F" },
        { value: "G", label: "G" },
        { value: "H", label: "H" },
        { value: "I", label: "I" },
        { value: "J", label: "J" },
        { value: "K", label: "K" },
        { value: "L", label: "L" },
        { value: "M", label: "M" },
        { value: "N", label: "N" },
        { value: "O", label: "O" },
        { value: "P", label: "P" },
        { value: "Q", label: "Q" },
        { value: "R", label: "R" },
        { value: "S", label: "S" },
        { value: "T", label: "T" },
        { value: "U", label: "U" },
        { value: "V", label: "V" },
        { value: "W", label: "W" },
        { value: "X", label: "X" },
        { value: "Y", label: "Y" },
        { value: "Z", label: "Z" },
      ],
      file_list: [],
    };
  },

  methods: {
    //添加品牌
    async addBrand() {
      const res = await addBrand(this.form);
      if (res.status === 200) {
        this.$message.success("添加成功");
        this.$parent.refresh();
        this.closeDailog();
        (this.form.letter = ""),
          (this.form.brandName = ""),
          (this.form.logo = ""),
          (this.file_list = []);
      } else {
        this.$message.error("添加失败");
      }
    },
    // 上传图片
    async uploadFile(file) {
      const formData = new FormData();
      formData.append("files", file.file);
      const res = await uploadImg(formData);
      if (res.status === 200) {
        this.form.logo = res.data.result[0];
      } else {
        this.$message.error("上传失败");
      }
    },

    changeFile(file, fileList) {
      this.file_list = fileList;
    },
    //删除上传图片
    handleRemove(file) {
      this.$refs.editEnc.abort(file);
      this.file_list.splice(this.file_list.indexOf(file), 1);
    },
    //删除已经上传的图片
    handleRemovelogo() {
        this.form.logo = "";
        this.file_list = [];
    },
    beforelogoUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG || (isPNG && isLt2M);
    },
    closeDailog() {
      this.dialogVisible = false;
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped>
.styleA .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.styleB .el-upload--picture-card {
  display: none;
}
</style>